<template>
  <view class="container">
    <view class="upload-wrapper">
      <ve-card title="上传驾驶证">
        <view class="ui_driving_flex">
          <view class="ui_driving_item up" @click="handleUpload('driverFrontFileId')">
            <image :src="driverFrontFileId.openUrl" />
            <view class="reupload" v-if="driverFrontFileId.openUrl">重新上传</view>
          </view>
          <view class="ui_driving_item down" @click="handleUpload('driverReverseFileId')">
            <image :src="driverReverseFileId.openUrl" />
            <view class="reupload" v-if="driverReverseFileId.openUrl">重新上传</view>
          </view>
        </view>
      </ve-card>
    </view>
    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" @click="submitFn">确认上传</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { uploadDriverFileAPI } from '@/api/order/sOrder'
  import { getFile } from '@/api/common/index'
  import { chooseImageWidthPermission, uploadFile } from '@/utils/index'
  import useToast from '@/hooks/useToast'

  const emit = defineEmits(['ok'])
  // 驾驶证正面
  const driverFrontFileId = ref({
    openUrl: '',
    fileIdStr: '',
  })
  // 驾驶证反面
  const driverReverseFileId = ref({
    openUrl: '',
    fileIdStr: '',
  })
  /**
   * 上传成功
   */
  const handleImgSuccess = (way, item) => {
    // 驾驶证正面
    if (way == 'driverFrontFileId') {
      driverFrontFileId.value.fileIdStr = item.fileIdStr
      driverFrontFileId.value.openUrl = item.openUrl
    }
    // 驾驶证反面
    if (way == 'driverReverseFileId') {
      driverReverseFileId.value.fileIdStr = item.fileIdStr
      driverReverseFileId.value.openUrl = item.openUrl
    }
  }
  const handleUpload = (type) => {
    // handleImgSuccess(type, {
    //   fileId: 2817483691494744000,
    //   openUrl: 'http://devimage.qichengcx.com/dev/upload/public/image/vmsweb/2023/49/35/2817483691494743808.jpg',
    //   storageFullPath: '/u01/projectQtrip/images/dev/upload/public/image/vmsweb/2023/49/35/2817483691494743808.jpg',
    //   fileName: '1696927113915_1677641559542.jpg',
    //   agreementId: null,
    //   fileIdStr: '2817483691494743808',
    // })
    chooseImageWidthPermission().then((res) => {
      var imgPath = res.tempFilePaths[0]
      let resSize = res.tempFiles[0].size
      if (resSize > 2291456) {
        uni.showToast({
          title: '上传图片大小不能超过2MB',
          icon: 'none',
        })
        return
      }
      uploadFile(imgPath).then((imgInfo) => {
        handleImgSuccess(type, imgInfo)
      })
    })
  }

  const memberId = ref('')
  const autoUpload = ref(false)
  onLoad((options) => {
    memberId.value = options.memberId
    const frontId = options.driverFrontFileId
    const reverseId = options.driverReverseFileId
    autoUpload.value = options.autoUpload == 'true' ? true : false

    if (frontId || reverseId) {
      let tempList = []
      frontId ? tempList.push(frontId) : ''
      reverseId ? tempList.push(reverseId) : ''
      getFile({ idList: tempList }).then((res) => {
        let fileList = res.result.map((item) => {
          return {
            openUrl: item.openUrl,
            fileIdStr: item.fileIdStr,
          }
        })
        if (frontId && reverseId) {
          driverFrontFileId.value = fileList[0]
          driverReverseFileId.value = fileList[1]
        } else {
          frontId ? (driverFrontFileId.value = fileList[0]) : ''
          reverseId ? (driverReverseFileId.value = fileList[1]) : ''
        }
      })
    }
  })

  const submitFn = () => {
    if (memberId.value && autoUpload.value) {
      const param = {
        id: memberId.value,
        driverFrontFileId: driverFrontFileId.value.fileIdStr,
        driverReverseFileId: driverReverseFileId.value.fileIdStr,
      }
      uploadDriverFileAPI(param).then(() => {
        useToast({
          title: '修改成功',
        }).then(() => {
          uni.$emit('uploadDriverLicenseOk', {
            driverFrontFileId: driverFrontFileId.value.fileIdStr,
            driverReverseFileId: driverReverseFileId.value.fileIdStr,
          })
          uni.navigateBack()
        })
      })
    } else {
      uni.$emit('uploadDriverLicenseOk', {
        driverFrontFileId: driverFrontFileId.value.fileIdStr,
        driverReverseFileId: driverReverseFileId.value.fileIdStr,
      })
      uni.navigateBack()
    }
  }
</script>

<style lang="less" scoped>
  .upload-wrapper {
    padding: 24rpx;
    .ui_driving_flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0rpx;
      width: 100%;
    }
    .ui_driving_item {
      position: relative;
      width: 284rpx;
      height: 184rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      border-radius: 16rpx;
      image {
        width: 100%;
        height: 100%;
      }
      .reupload {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        height: 56rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0px 0px 16rpx 16rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 56rpx;
      }
    }
    .up {
      background-image: url(@/static/images/drivers_card1.png);
    }
    .down {
      background-image: url(@/static/images/drivers_card2.png);
    }
  }
</style>
